{% extends "base.html" %}
{% load custom_filters %}  <!-- 加载自定义过滤器 -->
{% block title %}Login - AI-Clinical Note Coach{% endblock %}

{% block content %}
<div class="flex flex-col md:flex-row min-h-[calc(100vh-13rem)]">
    <!-- 左侧品牌展示区 -->
    <div class="hidden md:flex md:w-1/2 bg-gradient-tech rounded-xl p-8 text-white flex-col justify-center">
        <div class="mb-8">
            <div class="flex items-center space-x-3 mb-6">
                <div class="bg-white text-primary p-2 rounded-lg">
                    <i class="fa fa-heartbeat text-2xl"></i>
                </div>
                <h1 class="text-3xl font-bold">AI-Clinical Note Coach</h1>
            </div>
            <p class="text-white/80 text-lg max-w-md">
                专业的医疗管理解决方案，为医疗机构提供高效、安全、智能的管理服务
            </p>
        </div>
        
        <!-- 特色图标区 -->
        <div class="grid grid-cols-2 gap-6 mt-12">
            <div class="flex items-start space-x-3">
                <div class="bg-white/20 p-3 rounded-lg">
                    <i class="fa fa-shield text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">安全可靠</h3>
                    <p class="text-white/70 text-sm">严格的数据加密与权限管理</p>
                </div>
            </div>
            <div class="flex items-start space-x-3">
                <div class="bg-white/20 p-3 rounded-lg">
                    <i class="fa fa-bolt text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">高效便捷</h3>
                    <p class="text-white/70 text-sm">简化工作流程，提升管理效率</p>
                </div>
            </div>
            <div class="flex items-start space-x-3">
                <div class="bg-white/20 p-3 rounded-lg">
                    <i class="fa fa-users text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">多角色支持</h3>
                    <p class="text-white/70 text-sm">满足管理员、医生、患者不同需求</p>
                </div>
            </div>
            <div class="flex items-start space-x-3">
                <div class="bg-white/20 p-3 rounded-lg">
                    <i class="fa fa-line-chart text-xl"></i>
                </div>
                <div>
                    <h3 class="font-semibold text-lg">数据可视化</h3>
                    <p class="text-white/70 text-sm">直观展示关键业务指标</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 右侧登录表单区 -->
    <div class="w-full md:w-1/2 flex items-center justify-center p-6">
        <div class="w-full max-w-md">
            <!-- 移动端Logo -->
            <div class="flex items-center space-x-3 mb-8 md:hidden">
                <div class="bg-gradient-tech text-white p-2 rounded-lg">
                    <i class="fa fa-heartbeat text-xl"></i>
                </div>
                <span class="text-xl font-semibold text-primary">AI-Clinical Note Coach</span>
            </div>
            
            <div class="bg-white rounded-xl shadow-soft p-8">
                <h2 class="text-2xl font-bold mb-6 text-center">用户登录</h2>
                
                <form method="post" class="space-y-4">
                    {% csrf_token %}
                    
                    <!-- 用户名输入框 -->
                    <div>
                        <label for="{{ form.username.id_for_label }}" class="block text-text-secondary mb-1">
                            <i class="fa fa-user mr-1"></i>用户名
                        </label>
                        {{ form.username.errors }}
                        {{ form.username|add_class:"w-full px-4 py-2 border border-neutral-dark rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors" }}
                    </div>
                    
                    <!-- 密码输入框 -->
                    <div>
                        <label for="{{ form.password.id_for_label }}" class="block text-text-secondary mb-1">
                            <i class="fa fa-lock mr-1"></i>密码
                        </label>
                        {{ form.password.errors }}
                        {{ form.password|add_class:"w-full px-4 py-2 border border-neutral-dark rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors" }}
                    </div>
                    
                    <!-- 全局错误信息 -->
                    {% if form.non_field_errors %}
                        <div class="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg text-sm">
                            {% for error in form.non_field_errors %}
                                <i class="fa fa-exclamation-circle mr-1"></i>{{ error }}
                            {% endfor %}
                        </div>
                    {% endif %}
                    
                    <button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                        <i class="fa fa-sign-in mr-1"></i>登录系统
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}